<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <title>少儿英语启蒙岛 - Pico English Island</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- 加载屏幕 -->
    <div id="loading-screen" class="loading-screen">
        <div class="loading-content">
            <div class="loading-logo">🏝️</div>
            <h1 class="loading-title">少儿英语启蒙岛</h1>
            <div class="loading-spinner"></div>
            <p class="loading-text">正在准备学习资源...</p>
        </div>
    </div>

    <!-- 主应用容器 -->
    <div id="app" class="app hidden">
        <!-- 顶部导航栏 -->
        <header class="header">
            <button class="btn-back" id="btnBack" style="display: none;">
                <span class="icon">←</span>
            </button>
            <h1 class="header-title" id="headerTitle">少儿英语启蒙岛</h1>
            <div class="header-stats">
                <span class="stat-item">
                    <span class="stat-icon">⭐</span>
                    <span class="stat-value" id="statStars">0</span>
                </span>
            </div>
        </header>

        <!-- 大类选择界面 -->
        <section id="categories-screen" class="screen screen-categories">
            <div class="categories-container">
                <div class="categories-header">
                    <h2 class="categories-welcome">欢迎来到英语启蒙岛!</h2>
                    <p class="categories-subtitle">选择一个大类开始探索吧 🎉</p>
                </div>
                <div class="categories-grid" id="categoriesGrid">
                    <!-- 大类将动态生成 -->
                </div>
            </div>
        </section>

        <!-- 学习岛屿地图界面（小分类列表） -->
        <section id="island-map" class="screen screen-island hidden">
            <div class="island-container">
                <div class="island-header">
                    <button class="btn-back-to-categories" id="btnBackToCategories">
                        <span class="back-icon">←</span> 返回大类
                    </button>
                    <h2 class="island-welcome" id="categoryTitle">选择主题</h2>
                    <p class="island-subtitle" id="categorySubtitle">选择一个主题开始学习吧 🎉</p>
                </div>
                <div class="lessons-grid" id="lessonsGrid">
                    <!-- 小分类将动态生成 -->
                </div>
            </div>
        </section>

        <!-- 学习模式界面 -->
        <section id="learn-mode" class="screen screen-learn hidden">
            <div class="learn-container">
                <!-- 模式切换导航 -->
                <div class="mode-nav">
                    <button class="btn-icon btn-back-nav" id="btnBackFromLearn">
                        <span class="icon">←</span>
                    </button>
                    <div class="mode-tabs">
                        <button class="mode-tab active" data-mode="learn">
                            <span class="tab-icon">📚</span>
                            <span class="tab-text">学习</span>
                        </button>
                        <button class="mode-tab" data-mode="quiz">
                            <span class="tab-icon">✏️</span>
                            <span class="tab-text">测试</span>
                        </button>
                    </div>
                    <div class="lesson-name" id="learnLessonName">课程名称</div>
                    <button class="btn-toggle-language" id="btnToggleLanguageLearn" title="显示/隐藏母语">
                        <span class="icon">👁️</span>
                    </button>
                </div>

                <!-- 进度条 -->
                <div class="progress-bar-container">
                    <div class="progress-bar">
                        <div class="progress-fill" id="learnProgress"></div>
                    </div>
                    <span class="progress-text" id="learnProgressText">0/0</span>
                </div>

                <!-- 单词卡片 - 带左右按钮 -->
                <div class="card-with-controls">
                    <!-- 左侧按钮 -->
                    <button class="btn-nav btn-prev" id="btnPrev">
                        <span class="icon-large">👈</span>
                    </button>

                    <!-- 单词卡片 -->
                    <div class="card-container">
                        <div class="word-card" id="wordCard">
                            <div class="card-image-wrapper">
                                <img class="card-image" id="cardImage" src="" alt="">
                            </div>
                            <div class="card-content">
                                <div class="word-en-row">
                                    <h2 class="card-word-en" id="cardWordEn">Loading...</h2>
                                    <button class="btn-play-audio" id="btnPlayAudio">
                                        <span class="icon">🔊</span>
                                    </button>
                                </div>
                                <p class="card-word-cn" id="cardWordCn">加载中...</p>
                            </div>
                        </div>
                    </div>

                    <!-- 右侧按钮 -->
                    <button class="btn-nav btn-next" id="btnNext">
                        <span class="icon-large">👉</span>
                    </button>
                </div>

                <!-- 完成提示 -->
                <div class="learn-complete" id="learnComplete" style="display: none;">
                    <div class="complete-animation">🎉</div>
                    <h2 class="complete-title">太棒了!</h2>
                    <p class="complete-text">你已经学完了所有单词!</p>
                    <button class="btn-primary" id="btnStartQuiz">开始小测验 →</button>
                </div>
            </div>
        </section>

        <!-- 测试模式界面 -->
        <section id="quiz-mode" class="screen screen-quiz hidden">
            <div class="quiz-container">
                <!-- 模式切换导航 -->
                <div class="mode-nav">
                    <button class="btn-icon btn-back-nav" id="btnBackFromQuiz">
                        <span class="icon">←</span>
                    </button>
                    <div class="mode-tabs">
                        <button class="mode-tab" data-mode="learn">
                            <span class="tab-icon">📚</span>
                            <span class="tab-text">学习</span>
                        </button>
                        <button class="mode-tab active" data-mode="quiz">
                            <span class="tab-icon">✏️</span>
                            <span class="tab-text">测试</span>
                        </button>
                    </div>
                    <div class="lesson-name" id="quizLessonName">课程名称</div>
                    <button class="btn-toggle-language" id="btnToggleLanguageQuiz" title="显示/隐藏母语">
                        <span class="icon">👁️</span>
                    </button>
                </div>

                <!-- 顶部信息栏 -->
                <div class="quiz-header">
                    <div class="progress-bar-container">
                        <div class="progress-bar">
                            <div class="progress-fill" id="quizProgress"></div>
                        </div>
                        <span class="progress-text" id="quizProgressText">0/0</span>
                        <div class="lives-container" id="livesContainer">
                            <span class="heart filled">❤️</span>
                            <span class="heart filled">❤️</span>
                            <span class="heart filled">❤️</span>
                        </div>
                    </div>
                </div>

                <!-- 音频提示区 -->
                <div class="quiz-audio-section">
                    <div class="word-en-row">
                        <h2 class="quiz-word-display" id="quizWordDisplay">Loading...</h2>
                        <button class="btn-play-audio" id="btnQuizAudio">
                            <span class="icon">🔊</span>
                        </button>
                    </div>
                    <p class="quiz-instruction">听音频,选择正确的图片</p>
                </div>

                <!-- 选项网格 -->
                <div class="quiz-options" id="quizOptions">
                    <!-- 4个选项将动态生成 -->
                </div>

                <!-- 反馈区域 -->
                <div class="quiz-feedback correct" id="quizFeedback" style="display: none;">
                    <div class="feedback-content">
                        <span class="feedback-icon">✅</span>
                        <span class="feedback-text">回答正确!</span>
                    </div>
                </div>

                <!-- 测试完成界面 -->
                <div class="quiz-result" id="quizResult" style="display: none;">
                    <div class="result-animation">🎊</div>
                    <h2 class="result-title" id="resultTitle">关卡通过!</h2>
                    <div class="result-score">
                        <div class="score-item">
                            <span class="score-label">总题数</span>
                            <span class="score-value" id="scoreTotalQuestions">0</span>
                        </div>
                        <div class="score-item">
                            <span class="score-label">答对</span>
                            <span class="score-value score-correct" id="scoreCorrect">0</span>
                        </div>
                        <div class="score-item">
                            <span class="score-label">答错</span>
                            <span class="score-value score-wrong" id="scoreWrong">0</span>
                        </div>
                    </div>
                    <div class="result-accuracy">
                        <div class="accuracy-label">正确率</div>
                        <div class="accuracy-value" id="scoreAccuracy">0%</div>
                        <div class="accuracy-stars" id="scoreStars">⭐⭐⭐</div>
                    </div>
                    <div class="result-buttons">
                        <button class="btn-secondary" id="btnRetry">再试一次</button>
                        <button class="btn-primary" id="btnBackToMap">返回地图</button>
                    </div>
                </div>
            </div>
        </section>
    </div>

    <!-- 加载script.js -->
    <script src="script.js"></script>
</body>
</html>

